/**
 * 多彩主框架界面
 */
'use strict';
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import Home from './home/Home';
import FortuneMgr from './fortunemgr/FortuneMgr';
import FortuneGroup from './fortunegroup/FortuneGroup';
import Mine from './mine/Mine';

class AppMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
	  	      selectedTab:'duocai'
	      };
    }
    render() {
        return (
          <TabNavigator>
            <TabNavigator.Item
                title="多彩"
                selected={this.state.selectedTab === 'duocai'}
                selectedTitleStyle={styles.selectedTextStyle}
                titleStyle={styles.textStyle}
                renderIcon={() => <Image source={require("../../resources/images/icon_tab_menu_home_n.png")} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={require("../../resources/images/icon_tab_menu_home_s.png")} style={styles.iconStyle}/>}
                onPress={() => this.setState({ selectedTab: 'duocai' })}>
                <Home {...this.props}/>
              </TabNavigator.Item>
              <TabNavigator.Item
                title="财富管家"
                selected={this.state.selectedTab === 'fortunemgr'}
                selectedTitleStyle={styles.selectedTextStyle}
                titleStyle={styles.textStyle}
                renderIcon={() => <Image source={require("../../resources/images/icon_tab_menu_manager_n.png")} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={require("../../resources/images/icon_tab_menu_manager_s.png")} style={styles.iconStyle}/>}
                onPress={() => this.setState({ selectedTab: 'fortunemgr' })}>
                <FortuneMgr {...this.props}/>
              </TabNavigator.Item>
              <TabNavigator.Item
                title="投资圈"
                selected={this.state.selectedTab === 'fortunegroup'}
                selectedTitleStyle={styles.selectedTextStyle}
                titleStyle={styles.textStyle}
                renderIcon={() => <Image source={require("../../resources/images/icon_tab_menu_fund_n.png")} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={require("../../resources/images/icon_tab_menu_fund_s.png")} style={styles.iconStyle}/>}
                onPress={() => this.setState({ selectedTab: 'fortunegroup' })}>
                <FortuneGroup {...this.props}/>
              </TabNavigator.Item>
              <TabNavigator.Item
                title="我的"
                selected={this.state.selectedTab === 'mine'}
                selectedTitleStyle={styles.selectedTextStyle}
                titleStyle={styles.textStyle}
                renderIcon={() => <Image source={require("../../resources/images/icon_tab_menu_mine_n.png")} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={require("../../resources/images/icon_tab_menu_mine_s.png")} style={styles.iconStyle}/>}
                onPress={() => this.setState({ selectedTab: 'mine' })}>
                <Mine {...this.props}/>
              </TabNavigator.Item>
          </TabNavigator>
        );
    }
}

let styles = StyleSheet.create({
  container: {
      flex: 1
  },
   iconStyle:{
       width:26,
       height:26,
   },
   textStyle:{
       color:'#999',
   },
   selectedTextStyle:{
       color:'black',
   }
});
export default AppMain;
